<template>
    <AConfigProvider :locale="zhCN">
        <ALayout>
            <ALayoutHeader class="header" :style="{ position: 'fixed', zIndex: 1, width: '100%', height: '60px' }">
                <Header />
            </ALayoutHeader>
            <ALayout>
                <ALayoutSider
                    width="200"
                    :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0, bottom: 0 }">
                    <Sider :menus-list="menusList" />
                </ALayoutSider>

                <ALayout
                    :style="{
                        position: 'fixed',
                        height: 'calc(100vh - 64px)',
                        width: 'calc(100vw - 200px)',
                        padding: '0 24px',
                        marginLeft: '200px',
                        marginTop: '64px'
                    }">
                    <ABreadcrumb :style="{ position: 'fixed', zIndex: 1, margin: '16px 0' }">
                        <Breadcrumb />
                    </ABreadcrumb>
                    <ALayoutContent
                        :style="{
                            background: '#fff',
                            padding: '24px',
                            marginTop: '54px',
                            overflow: 'auto'
                        }">
                        <RouterView />
                    </ALayoutContent>
                </ALayout>
            </ALayout>
        </ALayout>
    </AConfigProvider>
</template>

<script setup lang="ts">
import zhCN from "ant-design-vue/es/locale/zh_CN";
import Header from "@/layout/Header/index.vue";
import Breadcrumb from "@/layout/Breadcrumb/index.vue";
import Sider from "@/layout/Sider/index.vue";
import { ItemType } from "ant-design-vue";
import { GoldOutlined, RocketOutlined, NodeIndexOutlined, SendOutlined } from "@ant-design/icons-vue";
import { h } from "vue";
import { useTabsStore } from "@/stores/modules/tabs";
import { RouteRecordRaw } from "vue-router";

const tabsStore = useTabsStore();

const iconMoudle: Record<string, any> = {
    GoldOutlined,
    RocketOutlined,
    NodeIndexOutlined,
    SendOutlined
};

const routerToMenu = (routes: RouteRecordRaw[] = []): ItemType[] =>
    routes.map(item => {
        return {
            key: item.path,
            label: item.meta?.title,
            title: item.meta?.title,
            icon: item.meta?.icon ? () => h(iconMoudle[item.meta?.icon ?? ""]) : void 0,
            children: item.children ? routerToMenu(item.children) : void 0
        };
    });

const menusList: ItemType[] = routerToMenu(tabsStore.effectRouter);
</script>
